<template>
	<view class="BlockCouponGoods" :style="{'min-height': pageHeight+'px'}">
		<view class="short-tabs isFixed" :style="{'top':top+'upx'}">
			<scroll-view scroll-x="true" class="scrollView" :scroll-into-view="tabScrollInto">
				<view class="short-tab" v-for="(item,index) in shortTabs" :key="index"
					:class="active===item.id?'active':''" :id="'item_'+item.id" @click="handleTab(item.id)">
					<view class="short-tab-item">
						<text>{{item.name}}</text>
						<text>{{item.label}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	
		<view class="goods-lists">
			<block-goods :list="list" :active="active"></block-goods>
			<block-loading :status="status" :len="list.length" :ph="statusBarHeight"></block-loading>
		</view>
	</view>
</template>

<script>
	import BlockGoods from "../BlockGoods/BlockGoods.vue"
	import {
		recommendGoods
	} from "@/api/duomai.js"
	export default {
		name: "BlockCouponGoods",
		components: {
			BlockGoods
		},
		props:{
			isFixed:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				active: 1,
				tabScrollInto: "",
				shortTabs: [{
						id: 1,
						name: "精选",
						label: "猜你喜欢"
					},
					{
						id: 2,
						name: "京东",
						label: "品牌好货"
					},
					{
						id: 5,
						name: "唯品会",
						label: "每日大牌"
					},
					{
						id: 6,
						name: "苏宁易购",
						label: "大牌电器"
					},
					// {
					// 	id: 3,
					// 	name: "拼多多",
					// 	label: "今日爆款"
					// },
					{
						id: 4,
						name: "考拉",
						label: "正品尖货"
					}
				],
				//商品列表
				list: [],
				status: "loading",
				page: 1,
				pageHeight:0, 
				top:0,
				statusBarHeight:0
			}
		},
		created() {
			this.getData();
			const res = uni.getSystemInfoSync();
			let winrate = 750/res.windowWidth;
			//页面高度 
			this.pageHeight = res.screenHeight-100;
			//tab定位
			this.statusBarHeight = res.statusBarHeight*winrate;
			this.top = res.statusBarHeight*winrate+100;
		},
		methods: {
			handleTab(id) {
				if (this.active === id) return;
				this.active = id;
				this.page = 1;
				this.list = [];
				this.status = "loading";
				this.tabScrollInto = 'item_' + id;
				this.getData();
			},
			//加载更多数据
			async getData() {
				let data = {
					page: this.page,
					page_size: 20,
					custom_type: this.active,
				};
				let res = await recommendGoods(data);
				if (res.code === 1) {
					let listData = res.data.data;
					if (this.page === 1 && listData.length === 0) {
						this.status = "nodata"
						return
					}
					if(this.page===1&&listData.length > 0 && listData.length < 20){
						this.status = "nomore"
					}
					if (listData.length === 0) {
						this.status = "nomore"
						return;
					}

					this.page++;
					this.list = this.list.concat(listData);
				}
			},
		}
	}
</script>

<style scoped lang="less" src="./BlockCouponGoods.less">
</style>
